<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" >
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="/js/qs.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <style>
        .el-input {
            width: 340px;
        }
        .input-with-select .el-input-group__prepend {
            background-color: #fff;
        }
    </style>
</head>
<body>
<!--<h1 th:text="${orderId}"></h1>-->
<div id="app">
    <!--查询打印机-->
    <div style="margin-top: 15px;">
        <el-input placeholder="请输入订单编号或激光码" v-model="number" class="input-with-select el-input">
            <el-button @click="handleCurrentChange(1)" slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <template>
            <el-radio-group v-model="orderType" @change="pickType" >
                <el-radio label="1">待排单</el-radio>
                <el-radio label="2">待生产</el-radio>
                <el-radio label="3">生产中</el-radio>
                <el-radio label="4">已入库</el-radio>
                <el-radio label="5">已结束</el-radio>
            </el-radio-group>
        </template>
    </div>

    <!--添加和删除-->
    <div style="margin-top:25px;">
        <el-button @click="autoDistribute" type="primary">自动分配</el-button>
        <el-button @click="distribute" type="success">手动分配</el-button>
        <el-button @click="branchRemove" type="danger">批量删除</el-button>
    </div>

    <el-dialog title="分配打印" :visible.sync="printersVisible" @close="closeDialog" width="80%"  style="margin-top: 25px">
        <template>
            <el-table
                    ref="singleTable"
                    :data="printers"
                    highlight-current-row
                    @current-change="handlePrinterChange"
                    style="width: 100%">
                <el-table-column
                        property="pNum"
                        label="打印机编号"
                        width="150">
                </el-table-column>
                <el-table-column
                        property="pServer"
                        label="服务器"
                        width="150">
                </el-table-column>
                <el-table-column
                        property="pDescrib"
                        label="描述"
                        width="150">
                </el-table-column>
                <el-table-column
                        property="pIp"
                        label="IP地址"
                        width="150">
                </el-table-column>
                <el-table-column
                        property="pRemark"
                        label="备注"
                        width="150">
                </el-table-column>
            </el-table>
        </template>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="assign">确 定</el-button>
        </div>
    </el-dialog>

    <template>
        <el-table
                ref="multipleTable"
                :data="allOrders"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="lNo"
                    label="订单编号"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="lCode"
                    label="组码"
                    width="120">
            </el-table-column>
            <el-table-column
                    :formatter="this.timeStamp"
                    label="只码1"
                    width="110">
            </el-table-column>
            <el-table-column
                    :formatter="this.timeStamp"
                    label="只码2"
                    width="110">
            </el-table-column>
            <el-table-column
                    :formatter="this.timeStamp"
                    label="只码3"
                    width="110">
            </el-table-column>
            <el-table-column
                    :formatter="this.timeStamp"
                    label="只码4"
                    width="110">
            </el-table-column>
            <el-table-column
                    :formatter="this.timeStamp"
                    label="只码5"
                    width="110">
            </el-table-column>
            <el-table-column
                    :formatter="this.timeStamp"
                    label="只码6"
                    width="110">
            </el-table-column>
            <el-table-column
                    prop="productPlanTime"
                    label="开始时间"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="productPlanOvertime"
                    label="结束时间"
                    width="120">
            </el-table-column>
            <el-table-column
                    :formatter="this.statusFormat"
                    prop="lStatus"
                    label="状态"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="lPrinter"
                    label="打印机"
                    width="120">
            </el-table-column>
        </el-table>
    </template>


    <!--分页-->
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[2,3,4,5]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
    </div>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data(){
           return{
               zhima:"",
               /*查询号码*/
               number:'[[${orderId}]]',
               /*订单状态*/
               orderType:'2',
               /*对话框可见性*/
               printersVisible:false,
               /*打印机*/
               printers:[],
               currentPrinter:{},
               /*订单*/
               allOrders:[],
               currentOrders:[],
               /*分页*/
               current:1,
               pageSize:2,
               total:0,
           }
        },
        methods:{
            pickType(val){
            //搜索框选中的订单类型
                this.orderType=val;
            },
            loadPrinters(){
            //加载所有的打印机
                axios.get("/produce/printers")
                .then(res=>{
                    this.printers=res.data;
                    console.log(this.printers)
                })
            },
            handlePrinterChange(val){
            //选择打印机
                this.currentPrinter=val;
            },
            timeStamp() {
            //生成只码
                if (this.zhima==""){
                    this.zhima = parseInt(new Date().getTime()) + '';
                }
                return this.zhima;
            },
            statusFormat(row){
                if (row.lStatus=='2'){
                    return '已生成';
                }else {
                   return '未生成';
                }
            },
            distribute(){
            //手动分配
                if (this.currentOrders.length==0){
                    alert("请选中要分配的的订单");
                }else {
                    this.printersVisible=true;
                }

            },
            autoDistribute(){
            //自动分配
                if (this.currentOrders.length==0){
                    alert("请选择要自动打印的订单");
                    return;
                }
                let orderIdArr=new Array();
                this.currentOrders.forEach(order => orderIdArr.push(order.lNo));
                axios.put("/produce/autoToPrint",Qs.stringify({orderIdArr:orderIdArr},{ indices: false }))
                .then(res=>{
                    if (res.data=="ok"){
                        // location.href="/page/produce/trace.html";
                        this.handleCurrentChange(this.current);
                    }
                })
            },
            branchRemove(){
            //批量移除选中订单的打印机
                if (this.currentOrders.length==0){
                    alert("请选择要删除的打印安排");
                    return;
                }
                let orderIdArr=new Array();
                this.currentOrders.forEach(order => orderIdArr.push(order.lNo));
                axios.delete("/produce/removeToPrint/"+orderIdArr)
                .then(res=>{
                    if (res.data="ok"){
                        this.$message("打印安排已移除");
                        this.handleCurrentChange(this.current);
                    }
                })
            },
            assign(){
            //将表格中选中的订单指定给打印机
                if (this.currentPrinter.pNum==null){
                    alert("请选定一个打印机指派");
                    return;
                }
                /*选中的激光表id*/
                let laserIdArr=new Array();
                /*选中的订单id*/
                let orderIdArr=new Array();
                this.currentOrders.forEach(order => {orderIdArr.push(order.lNo);laserIdArr.push(order.id)})
                console.log(this.currentPrinter.pNum)
                console.log(laserIdArr);
                console.log(orderIdArr);
                axios.put("/produce/toPrint",
                Qs.stringify({printer:this.currentPrinter.pNum,laserIdArr:laserIdArr,orderIdArr:orderIdArr},{ indices: false }))
                .then(res=>{
                    if (res.data=="ok"){
                        this.$message("您的打印任务已经提交给打印机，请查看打印情况，谢谢！");
                        this.handleCurrentChange(this.current);
                    }
                })
                this.printersVisible=false;
            },
            handleSizeChange(val) {
            //每页显示个数变化时
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
            },
            handleCurrentChange(val) {
            //当前页变化时
                console.log(`当前页: ${val}`);
                axios.get("/produce/printOrders?current=" + val +
                "&pageSize=" + this.pageSize +
                "&orderStatus=" + this.orderType +
                "&orderId=" + this.number)
                .then(res=>{
                    this.allOrders=res.data.records;
                    this.current=res.data.current;
                    this.pageSize=res.data.size;
                    this.total=res.data.total;
                })
            },
            handleSelectionChange(selections){
            //订单表格选中变化时
                this.currentOrders=selections;
                console.log(this.currentOrders)
            },
        },
        mounted(){
            this.loadPrinters();
            this.handleCurrentChange(1);
        }

    })
</script>
</html>